<template>
	<view>
		<view class="swiper">
			<swiper indicator-color='#FFFFFF' indicator-active-color='#007aff' circular :indicator-dots='false' autoplay
				:duration="500" :current='current' @change='changeSwiper'>
				<swiper-item v-for="(item,index) in productinfo.imgs" :key="index">
					<image :src="item" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
			<view class="tip" v-if="productinfo.imgs">
				{{current+1}}/{{productinfo.imgs.length}}
			</view>
			<view class="content">
				<view class="price">
					<text>￥</text>{{productinfo.price}}<text class="t2">/{{productinfo.unit}}</text>
				</view>
				<view class="title">
					{{productinfo.name}}
				</view>
				<view v-if="productinfo.info" class="introduce" @click="openPopup">
					<view class="text">
						{{productinfo.info}}
					</view>
				</view>
				<view class="introduce">
					<view class="subtit">
						配送时间
					</view>
					<view class="">
						17:00之前下单次日配送；17:00之后下单隔日配送；
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 430rpx;"></view>
		<view class="">
			<view class="shoptitle">
				相关产品
			</view>
			<view class="goods">
				<custom-waterfalls-flow :value="ProductList" @imageClick='godetail'>
					<view class="itemss" v-for="(item,index) in ProductList" :key="index" @click='godetail'
						slot="slot{{index}}">
						<view class="title">{{item.name}}</view>
						<view class="item_flex">
							<view class="price">
								<text>￥</text>{{item.price}}<text class="t2">/{{item.unit}}</text>
							</view>
							<countNum v-model.number="item.carCount" :shop='item'></countNum>
						</view>
					</view>
				</custom-waterfalls-flow>
			</view>
		</view>
		<view class="kf_zw"></view>
		<view class="footer_kf">
			<view class="cont flex_jc_sb">
				<view class="flex">
					<!-- <view class="kf">
						<image src="/static/kf.png" mode=""></image>
						<view class="">
							客服
						</view>
						<button class="adsbtn" open-type="contact"></button>
					</view> -->
					<view class="kf" @click="$pageGoTs('/pages/index/index')">
						<image src="/static/index.png" mode=""></image>
						<view class="">
							首页
						</view>
					</view>
					<view class="kf" @click="$pageGoTs('/pages/shopcart/shopcart')">
						<uni-badge :text="store.state.shopNum" absolute>
							<image src="/static/car.png" mode=""></image>
							<view class="">
								购物车
							</view>
						</uni-badge>
					</view>
				</view>
				<view class="btns">
					<view class="btn" v-if="isshow" @click="add">
						加入购物车
					</view>
					<view class="btn1" v-else>
						<uni-icons @click="jian" type="minus" size="26" color="#FF7700"></uni-icons>
						<input  @blur='inputblur' :value="productinfo.carCount" type="number"
							@input="handleInput" confirm-type="done" />
						<uni-icons type="plus-filled" size="26" color="#FF7700" @click="add"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="popup">
				<uni-icons class="icon" color="#AEAEAE" type="closeempty" size="26" @click="close()"></uni-icons>
				<view class="title">
					{{productinfo.name}}
				</view>
				<view class="text">
					{{productinfo.info}}
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		watch
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getproductinfo,
		getproductcategory,
		setShopCarCount,
		removeShopCar
	} from '@/common/http.api.js';




	const popup = ref(null)

	function openPopup() {
		popup.value.open()
	}

	function close() {
		popup.value.close()
	}

	const current = ref(0)

	function changeSwiper(e) {
		current.value = e.detail.current
	}

	const productinfo = ref({})
	const ProductList = ref([])
	onLoad((option) => {
		getproductinfo({
			id: option.shopid
		}).then(res => {
			res.data.imgs = res.data.imgs.split(',')
			productinfo.value = res.data
				isshow.value = productinfo.value.carCount>0?false:true
			getproductcategory({
				category1: res.data.category1,
				category2: res.data.category2,
				pageSize: 10
			}).then(product => {
				ProductList.value = product.rows.filter((item) => {
					return item.id != productinfo.value.id
				});
				console.log(ProductList.value);
			})
		})
	})

	function godetail(item) {
		uni.redirectTo({
			url: `/pages/index/shopdetail?shopid=${item.id}`
		})
	}

	import {
		useStore
	} from 'vuex';
	const store = useStore();
	const isshow = ref(true)
	function add() {
		productinfo.value.carCount++
		isshow.value = productinfo.value.carCount>0?false:true
		setCount()
	}
	function jian() {
		productinfo.value.carCount--
		if (productinfo.value.carCount == 0) {
			removeShopCar({
				ids: [productinfo.value.id]
			}).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '商品移除购物车',
						icon: 'none'
					})
					let total = res.data.reduce((sum, e) => sum + Number(e.productCount || 0), 0)
					store.commit('setShopNum', total)
					isshow.value = true
				}
			})
		} else {
			setCount()
		}
	}
	const handleInput = (event) => {
		productinfo.value.carCount = event.target.value
	};
	function inputblur() {
		if (productinfo.value.carCount < 1) {
			uni.showToast({
				title: '最小值为1',
				icon: 'none'
			})
			productinfo.value.carCount = 1
		}
		setCount()
	}
	function setCount() {
		setShopCarCount({
			productId: productinfo.value.id,
			productCount: productinfo.value.carCount
		}).then(res => {
			if (res.code == 200) {
				let total = res.data.reduce((sum, e) => sum + Number(e.productCount || 0), 0)
				store.commit('setShopNum', total)
			}
		})
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}

	.swiper {
		width: 100%;
		height: 600rpx;
		position: relative;
		background: #fff;

		swiper {
			width: 100%;
			height: 560rpx;

			image {
				width: 100%;
				height: 560rpx;
			}
		}

		.tip {
			position: absolute;
			right: 20rpx;
			bottom: 40rpx;
			width: 80rpx;
			height: 40rpx;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: center;
		}

		.content {
			width: 750rpx;
			background: linear-gradient(180deg, #FFEDDE 0%, #FFFFFF 90%);
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			position: absolute;
			top: 570rpx;
			padding: 34rpx 20rpx 0rpx;
			box-sizing: border-box;
			border: 1px soloid red;

			.price {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 48rpx;
				color: #FF0000;

				text {
					font-weight: 500;
					font-size: 30rpx !important;
				}

				.t2 {
					font-weight: 500;
					font-size: 30rpx !important;
					color: #efefef;
				}
			}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
				margin: 14rpx 0rpx;
				
			}

			.introduce {
				width: 710rpx;
				background: #F8F8F8;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #8E8E8E;
				line-height: 30rpx;
				padding: 24rpx 20rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				.text {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2; //几行就填几
					-webkit-box-orient: vertical;
					
				}
				.subtit {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					margin-bottom: 12rpx;
				}
			}
		}
	}


	.shoptitle {
		margin-left: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
	}

	.shoptitle::before {
		content: '|';
		color: #FF7700;
	}

	.goods {
		width: 710rpx;
		margin: 20rpx auto;

		.itemss {
			padding: 20rpx;
			box-sizing: border-box;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
			}

			.item_flex {
				.price {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FF0000;

					text {
						font-weight: 500;
						font-size: 20rpx !important;
					}

					.t2 {
						font-weight: 500;
						font-size: 24rpx !important;
						color: #efefef;
					}
				}

				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}

	.footer_kf {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 9;

		.cont {
			padding: 10rpx 30rpx 10rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			height: 120rpx;
			color: #000000;

			.kf {
				height: 100rpx;
				position: relative;
				text-align: center;
				margin-right: 46rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				font-family: PingFang SC,
				PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #545454;

				.adsbtn {
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					top: 0%;
					opacity: 0;
				}
			}

			.btn {
				width: 300rpx;
				height: 80rpx;
				background: #FF7700;
				border-radius: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}

			.btn1 {
				width: 300rpx;
				border: 1px solid #FF7700;
				height: 78rpx;
				border-radius: 40rpx;
				display: flex;
				padding: 0rpx 56rpx;
				box-sizing: border-box;
				line-height: 78rpx;
				text-align: center;

				input {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #FF0000;
					line-height: 78rpx;
					height: 78rpx;
				}
			}
		}
	}

	.popup {
		width: 750rpx;
		height: 740rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: relative;
		padding: 58rpx 20rpx;
		box-sizing: border-box;

		.icon {
			right: 30rpx;
			top: 30rpx;
			position: absolute;
		}

		.title {
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #000000;
		}

		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			margin-top: 20rpx;
		}
	}
</style>